<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影管理</title>
    <link rel="stylesheet" th:href="@{/public/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/news/list.css}">
    <script th:src="@{/public/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/lib/layui/layui.js}"></script>
    <script th:src="@{/news/list.js}"></script>
</head>
<body>
<!--条件搜索区-->
<div class="search">
    <form action="">
        <div>
            <label for="newsId">电影编号</label>
            <input type="text" id="newsId" autocomplete="off" placeholder="请输入电影编号">
        </div>
        <div>
            <label for="title">标题</label>
            <input type="text" id="title" autocomplete="off" placeholder="请输入标题">
        </div>
        <div>
            <label for="category">类别</label>
            <select id="category">
                <option value="">不限</option>
                <option value="剧情">剧情</option>
                <option value="爱情">爱情</option>
                <option value="科幻">科幻</option>
                <option value="喜剧">喜剧</option>
                <option value="动作">动作</option>
            </select>
        </div>
        <div>
            <label for="author">导演</label>
            <input type="text" id="author" autocomplete="off" placeholder="请输入导演">
        </div>

    </form>
</div>

<!--按钮区-->
<div class="action">
    <div>
        <button id="add-btn" type="button">新增</button>
    </div>
    <div>
        <button id="edit-btn" type="button">修改</button>
    </div>
    <div>
        <button id="del-btn" type="button">删除</button>
    </div>
    <div>
        <button id="search-btn" type="button">查询</button>
    </div>
    <div>
        <button id="reset-btn" type="button">重置</button>
    </div>
</div>

<!--数据区-->
<div class="data">
    <table id="tbl">
        <thead>
        <tr>
            <th><input type="checkbox" id="check-all"></th>
            <th>电影编号</th>
            <th>电影标题</th>
            <th>导演</th>
            <th>电影类别</th>
            <th>上映日期</th>
            <th>电影详情</th>
            <th>主演</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<!--分页区-->
<div class="paginate">
    <ul>
        <li class="first fixed"><a href="javascript:void(0)">首页</a></li>
        <li class="prev fixed"><a href="javascript:void(0)">上一页</a></li>

        <li class="next fixed"><a href="javascript:void(0)">下一页</a></li>
        <li class="last fixed"><a href="javascript:void(0)">尾页</a></li>
    </ul>
</div>
</body>
</html>